<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>



<!--    主题切换-->
    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
    <title>Document</title>
    <style>
        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
        }
    </style>
</head>
<body>
<div id="app" >

    <van-search v-model="value" @click="showPopup" placeholder="请输入搜索关键词"></van-search>
    <!--    //弹出搜索-->
    <van-popup v-model="show" position="top" :style="{ height: '50%' }" duration="0.2" overlay=true>
        <form action="/">
            <van-search
                    v-model="value"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
            />
        </form>
    </van-popup>

<!--图片轮播-->
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image" style="height: 150px;width: 100%"></img>

        </van-swipe-item>
    </van-swipe>


    <van-notice-bar
            scrollable=true
            left-icon="volume-o"
            text="互联网不是法外之地!!!    平台提倡大家和谐交流,构建和谐的内部环境，平台将对一切不符合社区规范的内容，用户进行追究。"
    ></van-notice-bar>

    <van-tabs v-model="activeName" @click="onClick">

        <!--最新面板-->
        <van-tab title="最新" name="a">
            <!--    帖子-->
            <div v-for="" style="width: 100% ;border: darkseagreen solid 1px;margin: 1px">

                <!--  头像与用户名统一布局-->
                <div style="height: 65px ;border: #ed6a0c solid 1px">
                      <div style="padding-top: 5px ;border: #206ffc solid 1px;padding-bottom: 5px;float: left" >
                             <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                      width="50"
                                     height="50"
                                    round>
                                  <template v-slot:loading>
                                    <van-loading type="spinner" size="20"/>
                                 </template>
                              </van-image>
                      </div>
                        <div style=" width: 100px;height: auto ;margin-top: 10px;margin-left: 10px;background-color: #07c160 ;float: left">
                     <span style="font-size: 22px;color: red">  <b>杜昇文</b></span>
                        </div>


                    <div style=" width: 200px;height: auto ;margin-top: 43px;margin-left: 60px;background-color:  blue ;text-align: left">
                        <span style="text-align: left"> :个性签名</span>
                    </div>
                </div>


                <div style="margin-bottom: 10px">
                    社会主义核心价值观是社会主义核心价值体系的内核，体现社会主义核心价值体系的根本性质和基本特征，反映社会主义核心价值体系的丰富内涵和实践要求，是社会主义核心价值体系的高度凝练和集中表达。 [1-4]
                    党的十八大以来，中央高度重视培育和践行社会主义核心价值观。习近平总书记多次作出重要论述、提出明确要求。中央政治局围绕培育和弘扬社会主义核心价值观、弘扬中华传统美德进行集体学习。中办下发《关于培育和践行社会主义核心价值观的意见》。党中央的高度重视和有力部署，为加强社会主义核心价值观教育实践指明了努力方向，提供了重要遵循。 [1-4]
                    2017年10月18日，习近平同志在十九大报告中指出，要培育和践行社会主义核心价值观。要以培养担当民族复兴大任的时代新人为着眼点，强化教育引导、实践养成、制度保障，发挥社会主义核心价值观对国民教育、精神文明创建、精神文化产品创作生产传播的引领作用，把社会主义核心价值观融入社会发展各方面，转化为人们的情感认同和行为习惯。
                </div>

            </div>

        </van-tab>
        <van-tab title="关注" name="b">
            内容 2
        </van-tab>
        <van-tab title="热门" name="c">
            内容 3
        </van-tab>
        <van-tab title="标签 4" name="d">
            内容 4
        </van-tab>
    </van-tabs>
    <div id="newTie" @click="addNewTie" style="background-color: darkseagreen">
        <van-icon name="add" color="#FFFFFF" size="50"/>
    </div>

    <van-divider
            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
        文字
    </van-divider>
    <van-tabbar v-model="active" inactive-color="#1989fa" active-color="#ee0a24" @change="onChange">
        <van-tabbar-item icon="home-o">主页</van-tabbar-item>
        <van-tabbar-item icon="smile-o" dot>树洞</van-tabbar-item>
        <van-tabbar-item icon="more-o" badge="5">消息</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
</div>
<script>
    function goToPage(index) {
        let page = "index.html";
        switch (index) {
            case 0:
                page = "index.html";
                break;
            case 1:
                page = "shudong.html";

                break;
            case 2:
                page = "news.html";
                break;
            case 3:
                page = "my.html";
                break;
        }
        location.href = page;
    }
    </script>



<script>
    let vm = new Vue({
        el: '#app',
        data: {
            activeName: 'a',
            loading: true,
            show: false,
            value: "",
            active: 0,
            images: [
                'img/2.png',
                'img/2.png',
            ],
            tiesList:[]
        },
        methods: {
            onClick(){

            },
            onChange(index) {
                goToPage(index);
            },
            onSearch(val) {
                alert(this.value)
            },
            onCancel() {
                this.show = false;
            },
            showPopup() {
                this.show = true;
            },
            addNewTie(){
                location.href="addNewTie.html";
            }
        },
        mounted(){
            $.ajax({
                url:'api/chushihua',
                type:'get',
                dataType:'json',
                success:function (res){
                    let that=this;
                    that.tiesList=res.data;
                    alert(res.data);
                }

            })


        }
    });
</script>


<script>

    let options = {
        bottom: "60px", // 定位底部距离 - 默认: '32px'
        right: "60px", // 定位右边距离 - 默认: '32px'
        left: "unset", // 定位左边距离 - 默认: 'unset'
        time: "0.5s", // 默认动画时间: '0.3s'
        mixColor: "#fff", // 需要改变的颜色 - 默认: '#fff'
        backgroundColor: "#DDD", // 背景颜色 - 默认: '#fff'
        buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c'
        buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff'

        saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
        label: "🌓", // 切换模式按钮图标 - 默认: ''
        autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true
    };

   // const darkmode = new Darkmode(options);
    // darkmode.showWidget();
    var t = new Date();
    if (parseInt(t.getHours())>22){
        const darkmode = new Darkmode(options);
        darkmode.toggle();
        console.log(darkmode.isActivated())
    }


</script>

</body>
</html>